<template>
  <div class="commit">
    <!-- 评论区域 -->
    <main-table>
      <div slot="left" class="body-left">
        <a href="javascripr:;" class="hot-a">评论</a>
        <slot name="commentCount">
          <span>共{{ playListDetail.commentCount }}条评论</span>
        </slot>
      </div>
      <div slot="right"></div>
      <div slot="body">
        <div class="commit">
          <img
            :src="
              token
                ? this.$store.state.userDetail.avatarUrl
                : 'https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50'
            "
            alt=""
            class="commit-img"
          />
          <!-- 评论框 -->
          <div class="commit-input">
            <slot name="input">
              <el-input
                show-word-limit
                maxlength="140"
                type="textarea"
                :rows="3"
                placeholder="评论"
                v-model="commitInput"
                :disabled="disabled"
                @focus="inputFocus"
              >
              </el-input>
            </slot>

            <div class="commit-bottom">
              <div class="commit-bottom-left">
                <!-- 表情 -->
                <el-popover
                  placement="bottom"
                  title="标题"
                  width="200"
                  trigger="click"
                  v-model="visible"
                >
                  <div>
                    <ul>
                      <slot name="emojis">
                        <li
                          v-for="(emoji, index) in emojis"
                          :key="index"
                          @click="emojiClick(index)"
                        >
                          {{ emoji }}
                        </li>
                      </slot>
                    </ul>
                  </div>
                  <i class="email" slot="reference"></i>
                </el-popover>

                <i class="em"></i>
              </div>
              <slot name="click">
                <el-button type="primary" size="mini" @click="comment()"
                  >评论</el-button
                >
              </slot>
            </div>
          </div>
        </div>
      </div>
    </main-table>
  </div>
</template>

<script>
import { comment } from '@/api/api.js'
import mainTable from './mainTable.vue'
export default {
  components: { mainTable },
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      emojis: [
        '😀',
        '😄',
        '😅',
        '🤣',
        '😂',
        '😉',
        '😊',
        '😍',
        '😘',
        '😜',
        '😝',
        '😏',
        '😒',
        '🙄',
        '😔',
        '😴',
        '😷',
        '😎',
        '😮',
        '😰',
        '😭',
        '😱',
        '😩',
        '😡',
        '💀',
        '👽',
        '🤓',
        '😺',
        '😹',
        '😻',
        '🤚',
        '💩',
        '👍',
        '👎',
        '👏',
        '🙏',
        '💪'
      ],
      visible: false,
      // input按钮
      disabled: false,
      commitInput: ''
    }
  },
  methods: {
    // input焦点
    inputFocus() {
      if (!window.sessionStorage.getItem('token')) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
        this.disabled = true
      }
    },
    // 点击表情
    emojiClick(index) {
      if (!window.sessionStorage.getItem('token')) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
        return (this.disabled = true)
      }
      let a = this.commitInput.split('')
      a.push(this.emojis[index])
      let b = a.join('')
      this.commitInput = b
    },
    async comment() {
      if (
        !window.sessionStorage.getItem('token') &&
        !window.sessionStorage.getItem('cookie')
      ) {
        return this.$message.warning('请先登录')
      }
      const res = await comment(
        1,
        this.info.type,
        this.info.id,
        this.commitInput
      )
      this.$message.error(`${res.msg}`)
    }
  },
  computed: {
    token() {
      const token =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!token) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.left-body {
  margin-top: 50px;
  .body-left {
    width: 145px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .right-color {
    color: #c20c0c;
    font-weight: bold;
  }
}
.commit {
  width: 100%;
  // height: 98px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .commit-img {
    display: block;
    width: 50px;
    height: 50px;
    &:hover {
      cursor: pointer;
    }
  }
  .commit-input {
    width: 91%;
    .em,
    .email {
      display: block;
      width: 18px;
      height: 18px;
      background: url('https://s2.music.126.net/style/web2/img/icon.png?f3b9eb035cfaa5e1304d1fec5c8374da')
        no-repeat 0 9999px;
      &:hover {
        cursor: pointer;
      }
    }
    .em {
      margin-left: 2px;
      float: left;
      background-position: -60px -490px;
    }
    .email {
      float: left;
      background-position: -40px -490px;
    }
  }
}
.commit-bottom {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.el-popover ul {
  display: flex;
  flex-wrap: wrap;
  li {
    &:hover {
      cursor: pointer;
    }
  }
}
.el-pagination {
  text-align: center;
  margin-top: 30px;
}
</style>
